<template>
	<view>
		<view class="wrap" @click="navTo()">
			<view class="avatar">
				<headimg :realSrc="item.t_avatar"></headimg>
			</view>
			<view class="summary">
				<view class="summary_flex">
					<text class="name">{{ item.t_name }}</text>
					<text class="grade">{{ item.t_tags }}</text>
				</view>
				<text class="certificate">{{ item.t_seria }}</text>
			</view>
			<view class="back">
				<text class="icon iconfanhui"></text>
			</view>
		</view>
	</view>
</template>

<script>
	import headimg from '@/components/head_img.vue';
	export default {
		components: {
			headimg
		},
		props: {
			item: Object
		},
		methods: {
			navTo() {
				uni.navigateTo({
					url: '/pages/free-lesson/teacher-page?teacher_id=' + this.item.t_id
				})
			}
		}
	}
</script>

<style scoped>
	.icon {
		font-family: iconfont;
		color: #999;
	}

	/* .wrap{box-sizing: border-box; padding:30upx 20upx; width:646upx; display:flex;background: #FFF;border-radius: 20upx;} */
	.wrap {
		box-sizing: border-box;
		padding: 30upx 20upx;
		width: 100%;
		display: flex;
		background: #FFF;
		border-radius: 20upx;
	}

	.avatar {
		width: 120upx;
		height: 120upx;
		overflow: hidden;
		flex-shrink: 0;
	}

	.summary {
		margin: 0 20upx;
		overflow: hidden;
		width: 70%;
	}

	.summary_flex {
		display: flex;
		justify-content: flex-start;
		align-items: center;
	}

	.name {
		font-weight: bold;
		font-size: 34upx;
		color: #333;
		white-space: nowrap;
		overflow: hidden;
		text-overflow: ellipsis;
	}

	.grade {
		margin-left: 24upx;
		font-size: 26upx;
		color: #555;
		min-width: 280upx;
	}

	.certificate {
		font-size: 24upx;
		color: #999;
	}

	.icon {
		text-align: right;
		line-height: 120upx;
	}

	.certificate {
		width: 100%;
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
	}
</style>
